<template>
  <div class="add-admin">
    <span style="color:red; font-size: 20px">只允许root管理员再添加管理员</span>
    <el-form :model="form" class="add-admin-form">
      <el-form-item label="管理员姓名">
        <el-input v-model="form.adminName"></el-input>
      </el-form-item>
      <el-form-item label="管理员账号">
        <el-input v-model="form.adminAccount"></el-input>
      </el-form-item>
      <el-form-item label="管理员密码">
        <el-input v-model="form.adminPassword" type="password"></el-input>
      </el-form-item>
      <el-form-item label="管理员权限">
        <el-select v-model="form.adminRole">
          <el-option label="后台管理员" value="admin"></el-option>
          <el-option label="员工" value="staff"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="addAdmin">注册管理员</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {addAdmin} from "@/api/AdminApi";

export default {
  name: "AddAdmin",
  data() {
    return {
      form: {
        adminAccount: '',
        adminPassword: '',
        adminName: '',
        adminRole: ''
      }
    }
  },
  methods: {
    addAdmin() {
      this.$confirm('是否确认添加管理员?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.adminAccount === '' || this.adminPassword === '' || this.adminName === '' || this.adminRole === '') {
          this.$message.error('请填写完整')
          return
        }
        addAdmin(this.form.adminName, this.form.adminAccount, this.form.adminPassword, this.form.adminRole).then(res => {
          if (res['code'] === 0) {
            this.$message.success('成功添加')
          } else {
            this.$message.error(res['message'])
          }
        }).catch(e => {
          this.$message.error(e)
        })
      }).catch(() => {
        this.$message.info('取消添加')
      });
    }
  }
}
</script>

<style scoped>

.add-admin-form {
  width: 300px;
  margin: 0 auto;
}

</style>